<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<%@ include file="/pub/head_latest.inc"%>
	<script src="${baseURL}/js/jquerys/jquery.qrcode.min.js" type="text/javascript"></script>
	<script src="${baseURL}/js/handlebars/handlebars-min.js"></script>
	<link rel="stylesheet" href="${baseURL}/themes/default/css/filter.css" />
	<title>filter share</title>
</head>
<body>
	<div id="filter_big_div" class="filter_big_div list-block">
		<div class="title_div">
			<span class="span_left">请选择分享的过滤器</span>
			<span class="span_right show-all" alt="全部过滤器">全部过滤器</span>
		</div>
		<div class="content"></div>
	</div>

	<div id="userDiv" class="user_div list-block">
		<div class="title_div">
			<span class="span_left">请选择分享的用户</span>
			<span class="span_right select-all">全选</span>
			<span class="span_right show-all" alt="全部用户">全部用户</span>
		</div>
		<div class="content"></div>
	</div>
	
	
	<script id="template_user" type="text/x-handlebars-template">
		<div userId="{{id}}" class="data-block {{userClass}}" onclick="changeClass(this, 'user')" title="{{name}}">
			<img src="{{photoUrl}}" width="60px" height="60px">
			<br/>
			{{name}}
			<div class="choose_shaer_user"><img src="${baseURL}/img/choose.png" alt=""></div>
		</div>
	</script>
	<script id="template_filter" type="text/x-handlebars-template">
		<div class="data-block {{filterClass}}">
			<div title="{{name}}" filterId="{{id}}" class="filter_div" onclick="changeClass(this)">
				<img src="${baseURL}/img/filter_icon.png">
				{{name}}
			</div>
		</div>
	</script>
	<script type="text/javascript">
	var win = parent || window;
	
	$(function() {
		// 获取用户数据
		$.ajax({
			url : '${baseURL}/org/employee/employeelist/listJSONAll.do',
			type : 'post',
			data : {mdId:"${param.mdId}",mdCode:"${param.mdCode}"},
			dataType : 'json',
			success : function(data) {
				if(data.Rows) {
					renderUser(data.Rows);
				} else {
					$('#userDiv').append('<span class="reminder">没有用户数据</span>');
				}
				
			}
		});
		
		// 获取过滤器数据
		$.ajax({
			url : '${baseURL}/filter/filter/mdfilterlist/loadFilterJson.do',
			type : 'post',
			data : {mdCode:"${param.mdCode}",mdId:"${param.mdId}"},
			dataType : 'json',
			success : function(data) {
				if(data){
					renderFilter(data);
				}else{
					$('#filter_big_div').append('<span class="reminder">没有过滤器数据</span>');
				}
			},
			error : function(data) {
				$('#filter_big_div').append('<span class="reminder">没有过滤器数据</span>');
			}
		});
	});
	
	$(".select-all").click(function(){
		if($(this).hasClass("selected")){
			$('.unselected_user').removeClass('selected_user');
			$(this).removeClass("selected");
			$(this).html('全选');
		}else{
			$('.unselected_user').addClass('selected_user');
			$(this).addClass("selected");
			$(this).html('取消全选');
		}
	});
	
	$(".show-all").click(function(){
		if($(this).hasClass("selected")){
			$(this).parents(".list-block").find(".data-block.hide").removeClass("hide");
			$(this).removeClass("selected");
			$(this).html($(this).attr("alt"));
		}else{
			$(this).parents(".list-block").find(".data-block.hide_user").removeClass("hide");
			$(this).parents(".list-block").find(".data-block.hide_filter").removeClass("hide");
			$(this).addClass("selected");
			$(this).html('收起');
		}
	});

	function changeClass(obj, type){
	    if(type == 'user') {
            if($(obj).hasClass('selected_user')) {
                $(obj).removeClass('selected_user');
            } else {
                $(obj).addClass('selected_user');
            }
		} else {
			if($(obj).hasClass('selected_filter')){
				$(obj).removeClass('selected_filter');
			} else {
				$(obj).addClass('selected_filter');
			}
		}
	}

	function share(callBack) {
		if($('.selected_filter').length == 0) {
			win.$.ligerDialog.warn('请选择分享的过滤器');
			return;
		}
		if($('.selected_user').length == 0) {
			win.$.ligerDialog.warn('请选择分享的用户');
			return;
		}
		
		var filterIds = '';
		var userIds = '';
		$.each($('.selected_filter'), function (i, e) {
            if(i != 0) filterIds += ',';
            filterIds += $(e).attr('filterId');
        });
		
		$.each($('.selected_user'), function(i, e){
		    if(i != 0) userIds += ',';
            userIds += $(e).attr('userId');
		});
		
		$.ajax({
			url : '${baseURL}/filter/filter/mdfiltersave/batchSave.do',
			type : 'post',
			data : {userIds:userIds,filterIds:filterIds},
			dataType : 'json',
			success : function(data){
				if (data.hasOk) {
					win.$.ligerDialog.success(data.message);
					callBack();
				} else {
					win.$.ligerDialog.error(data.message);
				}
			}
		});
	}
	
	function renderFilter(data){
		var template = Handlebars.compile($('#template_filter').html());
		var count = 0;
		//渲染过滤器
		$.each(data.Rows, function(i, e) {
			if (e.id == '${id}') {
				e["filterClass"] = "show_filter";
				var html = template(e);
				var div = $(html);
				div.find('.filter_div').addClass('selected_filter');
				$('#filter_big_div>.content').prepend(div);
			}else if (e.state != 0){
				// 初始化时最多显示8个，其它隐藏
				if (count < 8) {
					e["filterClass"] = "show_filter";
				} else {
					e["filterClass"] = "hide_filter hide";
				}
				var html = template(e);
				$('#filter_big_div>.content').append(html);
			}
			count++;
		});
		//如果过滤器的个数不超过8个，则不显示查看全部
		if (count <= 8) {
			$("#filter_big_div .span_right").hide();
		}
	}
	
	//渲染用户
	function renderUser(userData) {
		$("#userDiv .span_right").html('全选');
		var template = Handlebars.compile($('#template_user').html());
		for (var i = 1; i < userData.length; i++) {
			var e = userData[i];
			if(i > 10){
				e["userClass"] = 'hide_user hide';
			}else{
				e["userClass"] = 'unselected_user';
			}
			e["photoUrl"] = e.userPhoto ? '${baseImgURL}' + e.userPhoto : "${baseURL}/img/user_logo.png";
			var html = template(e);
			$('#userDiv>.content').append(html);
		}
	}
</script>
</body>
</html>